<script setup lang="ts">
import baseSearch from '@/components/base-ui/base-search/index.vue';
import addDialog from './dialog/add.vue';
import { Plus } from '@element-plus/icons-vue';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { editConfig } from './config/edit-config';
import { doGetWorkshopList, doUpdateWorkshop } from '@/api/base/workshop/index';
import { doGetPageUserInfo } from '@/api/setting/memberManagement';
import addDataStore from '@/store/modules/addDataStore';
import type { WorkshopRecords } from '@/api/base/workshop/model/type';
import type { UserVO } from '@/api/setting/memberManagement/model/type';

const { handleAddData } = addDataStore();

defineOptions({
    name: 'workshopList'
});

const router = useRouter();

const tableRef = ref<TableRef>();

const searchRef = ref<InstanceType<typeof baseSearch>>();

/**
 * @: 新增
 */
const addRef = ref<InstanceType<typeof addDialog>>();
const handleAdd = () => {
    handleAddData('workshopAddData');
    tableRef.value?.clearSelection();
    router.push('/Workshop/add');
};

/**
 * @: 获取表格数据
 */
const getTableData = () => {
    tableRef.value?.getData?.();
};

/**
 * @: 编辑相关
 */
const baseEditRef = ref<EditRef>();
const edit = (row: WorkshopRecords) => {
    const leader = `${row.workshopLeader}-${row.jobNumber}`;
    baseEditRef.value?.open({ ...row, workshopLeader: leader });
};

/**
 * @: 成员列表
 */
const loading = ref(false);
const customerOption = ref<UserVO[]>([]);
const customerRemoteMethod = async (query: string) => {
    loading.value = true;
    try {
        const { data } = await doGetPageUserInfo({ userNameAndJobNumber: query, size: 100 }, 1);
        if (data?.records) {
            customerOption.value = data.records;
        }
    } catch (error) {
        console.log('-------', error);
    }
    loading.value = false;
};

/**
 * @: 处理编辑字段
 */
const handleSubmitData = (data: WorkshopRecords) => {
    const { id, workshopLeader, userId, workshopCode, workshopName, state } = data;
    const leader = workshopLeader as UserVO;
    return { id, userId: leader.id || userId, workshopCode, workshopName, state };
};
</script>
<template>
    <q-page>
        <base-search ref="searchRef" :table-ref="tableRef" :search-config="searchConfig" />
        <base-table
            ref="tableRef"
            :hide-del="true"
            action-width="60"
            :table-config="tableConfig"
            :get-data-fn="doGetWorkshopList"
            @edit="edit"
        >
            <template #tableHeadStart>
                <el-button type="primary" :icon="Plus" @click="handleAdd"> 新增 </el-button>
            </template>
            <template #state="{ row }">
                <div v-if="row.state === 'ENABLE'" class="align-center">
                    <q-icon icon-class="zhuangtai-qiyong" size="12" class-name="m-r-8" />
                    启用
                </div>

                <div v-else class="align-center">
                    <q-icon icon-class="zhuangtai-baofei" size="12" class-name="m-r-8" />
                    禁用
                </div>
            </template>
        </base-table>
        <add-dialog ref="addRef" @close="getTableData" />
        <base-edit
            ref="baseEditRef"
            :edit-config="editConfig"
            :updateFn="doUpdateWorkshop"
            :table-ref="tableRef"
            :handle-submit-data="handleSubmitData"
            column
            width="750px"
        >
            <!-- 车间负责人 -->
            <template #workshopLeader="{ row }">
                <el-select
                    v-model="row.workshopLeader"
                    filterable
                    remote
                    :loading="loading"
                    reserve-keyword
                    :remote-method="customerRemoteMethod"
                    value-key="id"
                    popper-class="push-select"
                    placeholder="请选择"
                    fit-input-width
                >
                    <el-option
                        v-for="item in customerOption"
                        :key="item.id"
                        :label="item.username + ' - ' + item.jobNumber"
                        :value="item"
                    />
                </el-select>
            </template>

            <!-- 手机号 -->
            <template #contactNumber="{ row }">
                <el-input :model-value="row.workshopLeader?.phone || row.contactNumber" disabled />
            </template>
        </base-edit>
    </q-page>
</template>

<style scoped lang="scss">
@include b(align-center) {
    display: flex;
    align-items: center;
}
</style>
